<template>
  <div class="sommelires-sort">
    <!--搜索-->
    <div class="search-body">
      <div class="input-box">
        <img src="../../assets/images/search-ico.png" alt=""/>
        <router-link to="">
          <input type="text" placeholder="请输入昵称或手机号码"/>
        </router-link>
      </div>
      <div class="filter-box" @click="openPop()">
        <img src="../../assets/images/filter-icon.png" alt=""/>
      </div>
    </div>
    <!--筛选弹窗-->
    <div class="filter-pop" :class="{show:isShow}">
      <div style="height:100%;" @click="closePop()"></div>
      <div class="filter-bg">
        <p>筛选</p>
        <div class="select-box">
          <div class="row-title">性别</div>
          <div class="select-info">
            <template v-for="(item,index) in gender">
              <span class="si-item" :class="{on:selecte==index}"
                    @click="selecte=index,changedGender(index)">{{item}}</span>
            </template>
          </div>
        </div>
        <!--侍酒师筛选内容-->
          <div class="select-box">
            <div class="row-title">年龄</div>
            <div class="select-info">
              <template v-for="(item,index) in age">
              <span class="si-item" :class="{on:selecte1==index}"
                    @click="selecte1=index,changedAge(index)">{{item}}</span>
              </template>
            </div>
          </div>
        <!--代理筛选内容-->
        <button type="button" class="confirm-btn" @click="sommmeliresConfirm()">确定</button>
      </div>
    </div>
    <!--tab切换页面-->
    <ul class="tab-ul">
      <li v-for="(tab,index) in tabs" @click="iscur=index,tabChange(index)"><span
        :class="{cur:iscur==index}">{{tab}}</span></li>
    </ul>
    <div class="content-box">
      <keep-alive>
        <component v-bind:is="tabView"></component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
import todayComponent from "./subComments/todayComponent.vue"
import monthComponent from  "./subComments/monthComponent.vue"
import yearComponent from  "./subComments/yearComponent.vue"
  export default {
    name: 'sommeliersSort',
    components:{
      "todayComponent":todayComponent,
      "monthComponent":monthComponent,
      "yearComponent":yearComponent
    },
    data() {
      return {
        tabView: 'todayComponent',
        tabViews: ['todayComponent', 'monthComponent', 'yearComponent'],
        tabs: ["今天", "本月", "本年"],
        iscur: 0,
        gender: ["全部", "男", "女"],
        age: ["全部", "20-25岁", "25-30岁", "30-35岁", "35以上"],
        selecte: 0,
        selecte1: 0,
        isShow: false,
      }
    },
    methods:{
      //tab标签
      tabChange(idx) {
        this.tabView = this.tabViews[idx];
        this.searchContent=idx;
      },
      // 打开筛选弹窗
      openPop() {
        this.isShow = true;
      },
      // 选择性别
      changedGender(idx) {
        console.log(idx);
      },
      // 选择年龄
      changedAge(idx) {
        console.log(idx);
      },
      // 关闭筛选弹窗
      closePop() {
        this.isShow = false;
      },
      //侍酒师筛选 确定按钮
      sommmeliresConfirm() {
        console.log("sommmeliresConfirm");
        this.closePop();
      },
    },
    created: function () {
      document.title = "侍酒师排名";
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  /*搜索*/
  .search-body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 10px 10px;
    background: #D44242;
    font-size: 1rem;
    .location, .input-box, .filter-box {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      color: #fff;
      vertical-align: top;
    }
    .input-box {
      width: 85%;
      line-height:26px;
      padding: 0 4px;
      border-radius: 4px;
      background-color: #fff;
      text-align: center;
      font-size: 0.9rem;
      img {
        width: 8%;
        vertical-align: middle;
      }
      input {
        width: 76%;
        height: 30px;
        border: none;
        outline: none;
        vertical-align: top;
        font-size: 0.9rem;
      }
    }
    .filter-box {
      width: 13%;
      text-align: right;
      img {
        width: 60%;
        vertical-align: middle;
      }
    }
  }
  /*tab样式*/
  @mt: 100px;
  .tab-ul {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    transition: 0.3s all;
    background: #fff;
    font-size: 1rem;
    li {
      flex: 1;
      text-align: center;
      font-size: 1rem;
      color: #777;
      .cur {
        display: inline-block;
        height: 100%;
        font-weight: bold;
        border-bottom: 2px solid #D44242;
        box-sizing: border-box;
        color: #D44242;
      }
    }
  }
  /*tab-内容*/
  .content-box {
    margin-top: @mt;
  }

  /*筛选弹窗*/
  .filter-pop {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    transition: 0.5s all;
    z-index: 10;
    .filter-bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
      height: 100%;
      background: #fff;
      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        background: #F3F3F3;
        font-size: 0.95rem;
        color: #777;
      }
      .select-box {
        width: 100%;
        padding-left: 10px;
        margin: 10px auto 0;
        .row-title {
          height: 30px;
          line-height: 30px;
          font-size: 0.95rem;
          color: #777;
        }
        .select-info {
          display: flex;
          flex-wrap: wrap;
          .si-item {
            font-size: 0.9rem;
            color: #777;
            padding: 2px 10px;
            border: 1px solid #aaa;
            border-radius: 20px;
            margin-right: 5%;
            margin-bottom: 10px;
          }
          .on {
            border: 1px solid #D44242;
            background: #D44242;
            color: #fff;
          }
        }
      }
      /*button*/
      .confirm-btn {
        width: 60%;
        height: 40px;
        border: none;
        border-radius: 4px;
        background: #D44242;
        font-size: 1rem;
        color: #fff;
        margin-left: 20%;
        margin-top: 60%;
      }
    }
  }
  .show {
    left: 0;
  }

</style>
